<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>具名插槽</title>
</head>
<body>

<!--父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。-->

<div id="app">

  <!--  注意 v-slot 只能添加在 <template> 上 (只有一种例外情况)，这一点和已经废弃的 slot attribute 不同。-->
<!--  <base-layout>-->
<!--    &lt;!&ndash;-->
<!--    在向具名插槽提供内容的时候，-->
<!--    我们可以在一个 <template> 元素上使用 v-slot 指令，-->
<!--    并以 v-slot 的参数的形式提供其名称：-->
<!--    &ndash;&gt;-->
<!--    <template v-slot:header>-->
<!--      <h1>Here might be a page title</h1>-->
<!--    </template>-->

<!--    &lt;!&ndash;    任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。&ndash;&gt;-->
<!--    &lt;!&ndash;    然而，如果你希望更明确一些，仍然可以在一个 <template> 中包裹默认插槽的内容：&ndash;&gt;-->
<!--    <p>A paragraph for the main content.</p>-->
<!--    <p>And another one.</p>-->

<!--    <template v-slot:footer>-->
<!--      <p>Here's some contact info</p>-->
<!--    </template>-->
<!--  </base-layout>-->

<!--  <hr>-->

  <base-layout>
    <h1 slot="header">Here might be a page title</h1>

    <p>A paragraph for the main content.</p>
    <p>And another one.</p>

    <p slot="footer">Here's some contact info</p>

  </base-layout>
</div>

<script src="../lib/vue.js"></script>
<script>
  Vue.component('base-layout', {
    template: `
      <div class="container">
        <header>
          <slot name="header"></slot>
        </header>
        <main>
<!--          <slot></slot>-->
        </main>
        <footer>
          <slot name="footer"></slot>
        </footer>
      </div>
    `
  })

  let vm = new Vue({
    el: '#app',
  })
</script>

</body>
</html>